<template>
  <div class="create-live">
    <div class="live-title">新建/编辑直播</div>
    <section v-loading="loading" class="live-main">
      <el-form ref="form" :model="form" :rules="rules" label-width="200px" class="form">
        <el-form-item label="活动类型" prop="classifyId">
          <el-radio-group v-model="form.classifyId">
            <el-radio v-for="(item, index) in dict.HDZXFXPC" :key="index" :label="item.dictValue">{{ item.dictName }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="直播活动名称" prop="liveName">
          <el-input v-model="form.liveName" placeholder="请输入直播名称" />
        </el-form-item>

        <el-form-item label="直播封面" prop="images" required>
          <image-upload
            :key="uploadFile.imagecropperKey"
            v-model="form.images"
            :preview-id="uploadFile.viewId"
            :forever="true"
            :width="654"
            :view="uploadFile.view"
            :height="368"
            :no-circle="true"
            :no-rotate="false"
            lang-type="zh"
            :is-oss="uploadFile.isOss"
            @changeOssPath="
              (path) => {
                uploadFile.viewId = path
              }
            "
          />
        </el-form-item>
        <el-form-item label="标签:">
          <el-checkbox-group v-model="form.subjectCategory" class="course-tag" size="mini">
            <el-checkbox v-for="(i, n) in tagList" :key="n" :label="i" border />
          </el-checkbox-group>
          <el-tag
            v-for="tag in form.courseLabel"
            :key="tag"
            class="item-course-tag"
            closable
            :disable-transitions="false"
            @close="handleCloseTag(tag)"
            >{{ tag }}
          </el-tag>
          <div>
            <el-input
              ref="tagInput"
              v-model="tagInputValue"
              class="input-new-tag"
              style="width:80%"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            />
            <span class="tip"><i class="el-icon-info"></i>输入完成后请回车</span>
          </div>
        </el-form-item>
        <el-form-item label="直播平台" prop="dockingLiveType">
          <el-radio-group v-model="form.dockingLiveType" :disabled="state === 'update'" @change="handleChagePlatform">
            <el-radio v-for="(i, n) in dict.LIVETYPE" :key="n" :label="i.dictValue">{{ i.dictName }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.dockingLiveType !== 'LIVETYPE_LINK'" label="讲师密码" prop="publisherPass">
          <el-input v-model="form.publisherPass" placeholder="请输入讲师密码" style="width:90%;" />
          <el-button type="text" @click="pb(8, 'publisherPass')">重新生成</el-button>
        </el-form-item>
        <el-form-item v-if="form.dockingLiveType === 'LIVETYPE_CCLIVE'" label="助教端密码" prop="assistantPass">
          <el-input v-model="form.assistantPass" placeholder="请输入助教端密码" style="width:90%;" />
          <el-button type="text" @click="pb(8, 'assistantPass')">重新生成</el-button>
        </el-form-item>
        <template v-if="form.dockingLiveType === 'LIVETYPE_CCLIVE' || form.dockingLiveType === 'LIVETYPE_POLYV'">
          <el-form-item v-if="!!form.dockingLiveType" label="校验地址" prop="checkUrl">
            <el-input v-model="form.checkUrl" placeholder="请输入校验地址" style="width: 100%;" />
          </el-form-item>
          <el-form-item v-if="!!form.dockingLiveType" label="直播间模板" prop="templateType">
            <el-radio-group v-model="form.templateType" :disabled="state === 'update'">
              <el-radio v-for="(i, n) in templateTypeList" :key="n" :label="i.value">{{ i.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </template>
        <template v-else-if="form.dockingLiveType === 'LIVETYPE_LINK'">
          <el-form-item label="直播间链接" class="is-required">
            <el-input v-model="form.checkUrl" placeholder="请输入直播间链接" style="width: 100%;" />
          </el-form-item>
        </template>
        <el-form-item label="直播开始时间" prop="liveStartTime">
          <div class="block">
            <el-date-picker
              v-model="form.liveStartTime"
              type="datetime"
              placeholder="选择日期时间"
              format="yyyy-MM-dd HH:mm"
              style="width: 100%;"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </div>
        </el-form-item>
        <el-form-item label="直播结束时间" prop="liveEndTime">
          <div class="block">
            <el-date-picker
              v-model="form.liveEndTime"
              type="datetime"
              placeholder="选择日期时间"
              format="yyyy-MM-dd HH:mm"
              style="width: 100%;"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </div>
        </el-form-item>
        <el-form-item label="直播范围" prop="liveRange">
          <div class="block">
            <el-radio-group v-model="form.liveRange">
              <el-radio v-for="(i, n) in rangeOptions" :key="n" :label="i.value">{{ i.label }}</el-radio>
            </el-radio-group>
          </div>
          <div v-if="form.liveRange === '3' || form.liveRange === '4'" style="color:red;font-size:12px;">
            *选择人员和部门时，需要到直播活动首页列表里点击范围按钮进行设置！
          </div>
        </el-form-item>
        <el-form-item label="预计在线人数" prop="viewCount">
          <el-select v-model="form.viewCount" placeholder="预计在线人数" style="width: 100%;">
            <el-option v-for="(i, n) in dict.VIEWCOUNT" :key="n" :label="i.dictName" :value="i.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否设置提前进入直播时间" prop="isBeforeEnter">
          <el-radio-group v-model="form.isBeforeEnter">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.isBeforeEnter === '1'" label="" prop="beforeEnter">
          <el-input v-model="form.beforeEnter" placeholder="请设置距离多少分钟能进入直播" style="width: 100%;" type="number" />
        </el-form-item>
        <!-- <el-form-item label="观看直播是否获取积分" prop="isGetPoints">
          <el-radio-group v-model="form.isGetPoints" @change="handleTip">
            <el-radio label="-1">与系统一致</el-radio>
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item v-if="form.isGetPoints === '1'" label="观看直播得积分用户类型" prop="userType">
          <el-radio-group v-model="form.userType">
            <el-radio label="ZC">注册用户</el-radio>
            <el-radio label="RZ">认证用户</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.isGetPoints === '1'" label="获得积分的观看时长" prop="getPointsDuration">
          <el-input v-model="form.getPointsDuration" placeholder="请输入观看直播获得积分的观看时长（单位：秒）" />
          <p style="color: red;font-size: 14px;margin:0;"><i class="el-icon-info"></i> 直播类型为第三方链接时无法获取观看时长</p>
        </el-form-item>
        <el-form-item v-if="form.isGetPoints === '1'" label="观看每场直播获得积分" prop="getPointsNum">
          <el-input-number
            v-model="form.getPointsNum"
            :precision="2"
            placeholder="请输入观看每场直播获得积分"
            :controls="false"
            style="width:100%;text-align:left;"
          />
        </el-form-item>
        <el-form-item label="是否允许预约" prop="isBook">
          <el-radio-group v-model="form.isBook">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="直播活动描述" prop="liveDesc">
          <tinymce v-if="showtinymce" v-model="form.liveDesc" :height="300" />
        </el-form-item>

        <!-- 加入抽奖相关 -->
        <el-form-item label="是否关联抽奖" prop="isDraw">
          <el-radio-group v-model="form.isDraw">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
          <div v-if="form.isDraw === '1'" style="color: #999999;">参与一场直播后可获得抽奖机会</div>
        </el-form-item>
        <el-form-item label="职工端是否展示">
          <el-radio-group v-model="form.isAppVisit">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.isDraw === '1'" label="每日抽奖机会上限" prop="drawChance">
          <el-input v-model.number="form.drawChance" placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="form.isDraw === '1'" label="总抽奖机会上限" prop="drawChance">
          <el-input v-model.number="form.allDrawTimes" placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="form.isDraw === '1'" label="抽奖配置" prop="bigturntableId">
          <div>
            <el-button class="button-new-tag" size="small" @click="showInputRwys">抽奖配置</el-button>
          </div>
          <div>
            <el-tag v-if="dialogMultipleSelections.bigturntableName !== undefined" closable @close="handleCloses(dialogMultipleSelections)">
              {{ dialogMultipleSelections.bigturntableName || bigturntableName }}
            </el-tag>
          </div>
        </el-form-item>

        <el-form-item v-if="form.isDraw === '1'" label="抽奖弹窗标题" prop="popTitle">
          <el-input v-model="form.popTitle" autosize placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="form.isDraw === '1'" label="抽奖弹窗引导按钮" prop="popButton">
          <el-input v-model="form.popButton" autosize placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="form.isDraw === '1'" label="抽奖弹窗样式选择" prop="popStyle">
          <el-select v-model="form.popStyle" autosize placeholder="请选择" style="width: 100%">
            <el-option v-for="item in popStyleList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <el-image style="width: 375px;margin-top: 10px;" :src="popStyleList[form.popStyle].imagesOss" />
        </el-form-item>
        <el-form-item v-if="form.isDraw === '1'" label="抽奖活动说明" prop="drawExplain">
          <el-input v-model="form.drawExplain" autosize type="textarea" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="form.sort" placeholder="输入排序" />
        </el-form-item>
      </el-form>
    </section>
    <section class="page-footer">
      <el-button
        @click="
          () => {
            $router.back()
          }
        "
        >取消</el-button
      >
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </section>
    <!-- 选择转盘 -->
    <el-dialog title="选择抽奖配置" :visible.sync="dialogFormVisibles" center fullscreen :close-on-click-modal="false">
      <choose-prize
        ref="resetAll"
        v-loading.fullscreen.lock="fullscreenLoadings"
        :before-list="beforeLists"
        :bigturntable-id="form.bigturntableId"
        @userData="userDatas"
      />
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px" @click="dialogFormVisibles = false">取消</el-button>
        <el-button style="padding: 8px 30px" type="primary" @click="insertUsers()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ChoosePrize from '@/views/activity/tphd/components/choosePrize'
import { queryDetail, insert, update, getDictByCode, getByName } from '../api'
import { getCourseTag } from '../api/index'
import CryptoJS from '@/utils/aesJiaJM'
import Tinymce from '@/components/Tinymce'
import ImageUpload from '@/components/ImageUpload'
export default {
  name: 'LiveManage',
  components: { Tinymce, ChoosePrize },
  data() {
    return {
      popStyleList: [
        {
          id: 0,
          name: '样式一',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/221202cc96931db26743919206900e8a2f390d.png'
        },
        {
          id: 1,
          name: '样式二',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/22120231f566d987e046718fe2eeae498020b6.png'
        },
        {
          id: 2,
          name: '样式三',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/2212027a85a262f6da40b8ab08ff5f8788f276.png'
        },
        {
          id: 3,
          name: '样式四',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/221202d7f2d0d9c2cd40d1a474301bdae7e155.png'
        },
        {
          id: 4,
          name: '样式五',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/2212026bf78ddb405c4affa83fab281ba8cf02.png'
        },
        {
          id: 5,
          name: '样式六',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/221202827b3f4b16a54addb0ae0fdc1d0ac910.png'
        },
        {
          id: 6,
          name: '样式七',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/221202ff3f9084d3bb4f1abb6ca173f24a253b.png'
        },
        {
          id: 7,
          name: '样式八',
          imagesOss: 'https://bjttsx-yanshi.oss-cn-beijing.aliyuncs.com/1/22/12/02/2212022fc3e4e4f9484ceabea370fab0c5e407.png'
        }
      ],
      dialogMultipleSelections: {},
      beforeLists: [],
      fullscreenLoadings: false,
      dialogFormVisibles: false,
      loading: false,
      form: {
        popTitle: '',
        popButton: '',
        popStyle: 0,
        allDrawTimes: 0,
        bigturntableId: '',
        drawChance: 0,
        drawExplain: '',
        isDraw: '0',
        classifyId: '', // type
        liveName: '',
        liveDesc: '',
        images: '',
        publisherPass: '',
        assistantPass: '',
        liveStartTime: '',
        liveEndTime: '',
        liveRange: '',
        viewCount: '',
        templateType: '',
        subjectCategory: [],
        courseLabel: [],
        sort: '',
        checkUrl: '',
        beforeEnter: '',
        isBeforeEnter: '0',
        isBook: '0',
        dockingLiveType: '',
        getPointsDuration: '',
        getPointsNum: '',
        userType: '',
        isGetPoints: '-1',
        isAppVisit: '1'
      },
      rules: {
        /*  classifyId: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],*/
        liveName: [
          { required: true, message: '请输入直播名称', trigger: 'blur' },
          { min: 1, max: 40, message: '请输入长度在1到40之间的字符', trigger: 'blur' }
        ],
        liveDesc: [{ required: true, message: '请输入直播描述', trigger: 'blur' }],
        images: [{ required: true, message: '请上传封面图片', trigger: 'change' }],
        publisherPass: [{ required: true, message: '请输入讲师密码', trigger: 'blur' }],
        assistantPass: [{ required: true, message: '请输入助教端密码', trigger: 'blur' }],
        liveStartTime: [{ required: true, message: '请设定直播开始时间', trigger: 'change' }],
        liveRange: [{ required: true, message: '请选择观众范围', trigger: 'blur' }],
        liveEndTime: [{ required: true, message: '请设置直播结束时间', trigger: 'blur' }],
        deptTrees: [{ required: true, message: '请设置部门', trigger: 'blur' }],
        isQuestion: [{ required: true, message: '请设置是否允许问答', trigger: 'blur' }],
        templateType: [{ required: true, message: '请设置直播间模板', trigger: 'blur' }],
        checkUrl: [{ required: true, message: '请设置校验地址', trigger: 'blur' }],
        beforeEnter: [{ required: true, message: '请设置距离多少分钟能进入直播间', trigger: 'blur' }],
        isBeforeEnter: [{ required: true, message: '请选择是否设置提前进入时间', trigger: 'blur' }],
        dockingLiveType: [{ required: true, message: '请选择直播平台', trigger: 'blur' }],
        isGetPoints: [{ required: true, message: '请选择观看直播是否能获得积分', trigger: 'blur' }],
        userType: [{ required: true, message: '请选择观看直播得积分用户类型', trigger: 'blur' }],
        getPointsDuration: [{ required: true, message: '请输入观看直播获得积分的观看时长（单位：秒)', trigger: 'blur' }],
        getPointsNum: [{ required: true, message: '请输入观看每场直播获得积分', trigger: 'blur' }],
        bigturntableId: [{ required: true, message: '请关联抽奖配置', trigger: 'blur'}]
      },
      rangeOptions: [
        {
          value: '0',
          label: '公众'
        },
        {
          value: '1',
          label: '注册用户'
        },
        {
          value: '2',
          label: '认证用户'
        },
        {
          value: '3',
          label: '部门'
        },
        {
          value: '4',
          label: '人员'
        }
      ],
      viewCountList: [
        {
          label: '100以下',
          value: 'YBYX'
        },
        {
          label: '100-500',
          value: 'YBZWB'
        },
        {
          label: '500-1000',
          value: 'WBZYQ'
        },
        {
          label: '1000以上',
          value: 'YQYS'
        }
      ], //
      // 观看范围多选
      props: { multiple: true },
      state: 'create',
      uploadFile: {
        viewId: '',
        view: '/API-DOCUMENT/document/file/download?id=',
        imagecropperKey: 0,
        isOss: sessionStorage.getItem('FILE_SAVE_THIRD_CONFIG') || false
      },
      orgProps: {
        label: 'name',
        value: 'id',
        children: 'list',
        multiple: true,
        emitPath: false,
        checkStrictly: true
      },
      orgTreeData: [],
      scope: [
        {
          label: '公众用户',
          value: '0'
        },
        {
          label: '注册用户',
          value: '0'
        },
        {
          label: '认证用户',
          value: '0'
        },
        {
          label: '公众用户',
          value: '0'
        }
      ],
      showtinymce: false,
      userId: [],
      showuser: false,
      listData: [],
      CurlistData: [],
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      tagInputValue: '',
      tagList: [],
      templateTypeList: [],
      dict: {
        VIEWCOUNT: [],
        LIVETYPE: [],
        HDZXFXPC: [] // type
      }
    }
  },
  created() {
    this.state = this.$route.query.type === 'u' ? 'update' : 'create'
    // 获取直播模板类型和观众类型
    if (this.state === 'update') {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      getCourseTag()
        .then((res) => {
          loading.close()
          this.tagList = res.data.data.configValue ? res.data.data.configValue.split(',') : []
          this.init()
        })
        .catch((err) => {
          loading.close(err)
        })
    } else {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      getCourseTag()
        .then((res) => {
          this.tagList = res.data.data.configValue ? res.data.data.configValue.split(',') : []
          loading.close()
        })
        .catch(loading.close)
      this.pb(8)
      this.showtinymce = true
    }
    this.getDict('VIEWCOUNT')
    this.getDict('LIVETYPE')
    this.getDict('HDZXFXPC')
  },
  methods: {
    handleCloses(dialogMultipleSelections) {
      this.dialogMultipleSelections = {}
      this.form.bigturntableId = ''
    },
    /**
     * 显示课程标签输入框
     */
    showTagInput() {
      this.tagInputVisible = true
      this.$nextTick((_) => {
        this.$refs.tagInput.$refs.input.focus()
      })
    },
    /**
     * 确认课程标签
     */
    handleCloseTag(tag) {
      this.form.courseLabel.splice(this.form.courseLabel.indexOf(tag), 1)
    },
    /**
     * 确认课程标签输入框内容
     */
    handleInputConfirm() {
      const inputValue = this.tagInputValue.trim().replace(/,|，/g, '')
      if (inputValue) {
        if (!this.form.courseLabel) {
          this.$set(this.form, 'courseLabel', [])
        }
        this.form.courseLabel.push(inputValue)
      }
      this.tagInputVisible = false
      this.tagInputValue = ''
    },
    // 确定选择抽奖配置
    insertUsers() {
      if (JSON.stringify(this.dialogMultipleSelections) === '{}') {
        this.$message({
          message: '请选择抽奖配置',
          type: 'warning'
        })
      } else {
        this.$set(this.form, 'bigturntableId', this.dialogMultipleSelections.id)
        this.dialogListLoadings = true
        this.dialogFormVisibles = false
      }
    },
    // 选择人物元素
    userDatas(val) {
      this.dialogMultipleSelections = val
    },
    // 选择转盘
    showInputRwys() {
      this.dialogFormVisibles = true
    },
    // 随机生成8位数密码
    pb(size, prop) {
      var p = []
      for (var a = 1; a <= 3; a++) {
        var seed = [
          'a',
          'b',
          'c',
          'd',
          'e',
          'f',
          'g',
          'h',
          'i',
          'j',
          'k',
          'm',
          'n',
          'p',
          'q',
          'r',
          's',
          't',
          'u',
          'v',
          'w',
          'x',
          'y',
          'z',
          '2',
          '3',
          '4',
          '5',
          '6',
          '7',
          '8',
          '9'
        ] // 密码源数组
        var n = ''
        for (var i = 0; i < size; i++) {
          var t = Math.round(Math.random() * (seed.length - 1))
          n += seed[t]
        }
        p.push(n)
      }
      if (this.state === 'create' && !prop) {
        this.form.publisherPass = p[0]
        this.form.assistantPass = p[1]
      }
      if (prop) {
        this.form[prop] = p[0]
      }
    },
    // 获取获取直播模板类型和观众类型分类
    // 获取字点
    // 提交
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (new Date(this.form.liveStartTime) >= new Date(this.form.liveEndTime)) {
            return this.$message({
              type: 'warning',
              message: '直播开始时间不能大于或等于结束时间！'
            })
          }
          if (this.form.viewCount && this.form.viewCount <= 0) {
            return this.$message({
              type: 'warning',
              message: '预计直播人数不能为负数或0！'
            })
          }
          if (this.form.dockingLiveType === 'LIVETYPE_LINK' && this.form.checkUrl === '') {
            return this.$message.error('请输入直播链接')
          }
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading'
          })
          const params = Object.assign({}, this.form)
          const courseLabel = [...params['subjectCategory'], ...params['courseLabel']].join(',')
          params['liveTags'] = courseLabel
          if (params['courseLabel'].length > 100) {
            return this.$message({ type: 'warning', message: '标签总字数不能超过100个字！' })
          }
          const jiamiArr = ['publisherPass', 'assistantPass']
          const joinArr = []
          for (const i of joinArr) {
            if (params[i] && params[i].length > 0 && Array.isArray(params[i])) {
              params[i] = params[i].flat(Infinity)
              params[i] = params[i].join(',')
            } else {
              params[i] = ''
            }
          }
          for (const key in params) {
            if (jiamiArr.includes(key)) {
              params[key] = CryptoJS.$aesJiaM(params[key])
            }
          }
          if (this.form.liveRange !== '3') {
            delete params.deptTrees
          }
          if (this.form.liveRange !== '4') {
            delete params.userId
          }
          if (this.form.dockingLiveType === 'LIVETYPE_POLYV') {
            delete params.assistantPass
          }
          if (this.form.dockingLiveType === 'LIVETYPE_LINK') {
            delete params.publisherPass
            delete params.assistantPass
          }
          if (this.state === 'create') {
            return new Promise((resolve, reject) => {
              delete params.courseLabel
              delete params.subjectCategory
              insert(params)
                .then(() => {
                  this.dialogVisible = false
                  loading.close()
                  this.$message({
                    title: '成功',
                    message: '创建成功',
                    type: 'success'
                  })
                  this.$router.back()
                  resolve()
                })
                .catch((error) => {
                  reject(error)
                  loading.close()
                })
            })
          } else {
            return new Promise((resolve, reject) => {
              delete params.courseLabel
              delete params.subjectCategory
              update(params)
                .then(() => {
                  this.dialogVisible = false
                  loading.close()
                  this.$message({
                    title: '成功',
                    message: '操作成功',
                    type: 'success'
                  })
                  this.$router.back()
                })
                .catch((error) => {
                  reject(error)
                  loading.close()
                })
            })
          }
        }
      })
    },
    init() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })

      queryDetail({ id: this.$route.query.i })
        .then((res) => {
          loading.close()
          if (res.data.code === '200') {
            this.form = res.data.data
            const data = res.data.data
            const subJect = []
            const jiemiArr = ['publisherPass', 'assistantPass']
            for (const key in this.form) {
              if (jiemiArr.includes(key)) {
                this.form[key] = CryptoJS.$aesJieM(this.form[key])
              } else {
                this.$set(this.form, key, this.form[key])
              }
            }
            const arr = this.tagList
            this.$set(this.form, 'courseLabel', (data.liveTags && data.liveTags.split(',')) || [])
            for (const i of this.form['courseLabel']) {
              if (arr.includes(i)) {
                subJect.push(i)
              }
            }
            this.$set(this.form, 'courseLabel', this.form['courseLabel'].filter((i) => !arr.includes(i)))
            this.$set(this.form, 'subjectCategory', subJect)
            this.$set(this.form, 'popStyle', this.form.popStyle ? this.form.popStyle : 0)
            this.uploadFile.viewId = res.data.data.imagesUrl
            this.$set(this, 'dialogMultipleSelections', {
              bigturntableName: res.data.data.bigturntableName,
              id: res.data.data.bigturntableId
            })
            this.showtinymce = true
            this.setTemplateTypeList()
          }
        })
        .catch((error) => {
          loading.close(error)
        })
    },
    getRowKeys(row) {
      return row.id
    },
    setCheckUrl() {
      let path = ''
      if (this.form.dockingLiveType === 'LIVETYPE_CCLIVE') {
        path = `${document.location.protocol}//${window.location.host}/API-ENTERPRISE-OPENAPI/openapi/live/check`
      } else {
        path = `${document.location.protocol}//${window.location.host}/API-ENTERPRISE-OPENAPI/openapi/live/external`
      }
      this.form.checkUrl = path
    },
    /**
     * 获取字典
     */
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode({ dictCode: code })
          .then((res) => {
            this.dict[code] = res.data.data && res.data.data.length > 0 ? res.data.data[0].list : []
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    getSysConfig() {
      getByName({ name: 'CC_ADD_AUDIT' }).then((res) => {
        if (res.data.data.configValue === '0') {
          this.needView = false
        } else {
          this.needView = true
        }
      })
    },
    handleChagePlatform() {
      this.form.checkUrl = ''
      if (this.form.dockingLiveType !== 'LIVETYPE_LINK') {
        this.setCheckUrl()
        this.setTemplateTypeList()
      }
    },
    setTemplateTypeList() {
      let arr = []
      if (this.form.dockingLiveType === 'LIVETYPE_CCLIVE') {
        arr = [
          {
            label: '视频',
            value: '1'
          },
          {
            label: '视频+聊天+问答',
            value: '2'
          },
          {
            label: '视频+聊天',
            value: '3'
          },
          {
            label: ' 视频+文档+聊天 ',
            value: '4'
          },
          {
            label: '视频+文档+聊天+问答',
            value: '5'
          }
        ]
      } else {
        arr = [
          {
            label: '文档+视频 ',
            value: 'ppt'
          },
          {
            label: '纯视频(专业)',
            value: 'alone'
          },
          {
            label: '纯视频(极速)',
            value: 'topclass'
          },
          {
            label: '文档+视频(竖屏)',
            value: 'portrait_ppt'
          },
          {
            label: '视频(竖屏)',
            value: 'portrait_alone'
          }
        ]
      }
      this.$set(this, 'templateTypeList', arr)
    },
    handleTip(val) {
      if (val !== '-1') {
        this.$message({
          type: 'warning',
          message: '与每日任务积分配置不一致，请谨慎设置'
        })
      }
    }
  }
}
</script>

<style lang="scss">
.create-live {
  background-color: #fff;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow: hidden;
  position: relative;
  .live-title {
    position: relative;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    padding: 0 20px;
    border-bottom: 1px solid #dfe2e2;
    /*margin-left: 20px;*/
    &::before {
      content: '';
      position: absolute;
      width: 3px;
      @include bg-color($mainColor);
      top: 15px;
      bottom: 15px;
      left: 15px;
    }
  }
  .live-main {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    padding: 20px 0;
    bottom: 52px;
    overflow: auto;
    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }

    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }

    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }
    .form {
      width: 1000px !important;
      margin: 0 auto;
    }
  }
  .page-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 99;
    background-color: #fff;
    text-align: center;
    padding: 10px;
    box-shadow: 0 -3px 6px #f5f5f5;
    display: flex;
    justify-content: center;
  }
  .table-box {
    margin-bottom: 30px;
  }
  .el-input__inner {
    text-align: left;
  }
}
</style>
